<template>
  <div>
    <Echart
      :options="options"
      height="100%"
      width="100%"
      @clickBar2="clickBar"
      :isclickBar2="true"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart';
export default {
  data() {
    return {
      options: {},
      currentShow: 0,
      max: 0,
      data2: []
    };
  },
  components: {
    Echart
  },
  props: {
    cdata: {
      type: [Object, Array],
      default: () => []
    }
  },
  methods: {
    clickBar(p) {
      console.log('flcz-chart');
      // this.options.series[0].itemStyle.color = 'blue';
      this.currentShow = p.dataIndex;
      const arr = this.data2
        .map(() => this.max)
        .map((i, index) => {
          return (
            index == this.currentShow && {
              value: this.max
            }
          );
        });
      this.options.series[2].data = arr;
      this.$emit('clickBar', p);
    }
  },
  watch: {
    cdata: {
      handler(newData) {
        const dataArr = newData.map((item) => item.value);
        this.data2 = dataArr;
        this.max = dataArr.concat(dataArr).reduce((pre, cur) => (pre > cur ? pre : cur), 0) + 10;
        this.options = {
          grid: {
            top: '40px',
            left: '45px',
            bottom: '60px'
          },
          tooltip: {
            show: false,
            trigger: 'axis',
            axisPointer: {
              type: 'line',
              lineStyle: {
                color: 'rgba(255, 190, 0, 0.08)',
                width: 50,
                type: 'solid'
              },
              z: 0 // 注意要设置层级，不然会在覆盖在柱子前面，设置为0就在柱子后面显示了。
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: 'rgba(108, 128, 151, 0)'
              }
            },
            axisLabel: {
              fontFamily: 'MicrosoftYaHei',
              color: 'rgba(208, 222, 238, 1)',
              fontSize: 20
            },
            splitNumber: 4,
            splitLine: {
              show: true,
              lineStyle: {
                type: 'solid',
                color: ['rgba(108, 128, 151, 0.30)', 'rgba(108, 128, 151, 0.30)', 'rgba(108, 128, 151, 0.30)', 'rgba(108, 128, 151, 0.30)', 'rgba(108, 128, 151, 0)'], // 坐标轴线颜色
                width: '1'
              }
            },
            max: this.max
          },
          xAxis: [
            {
              type: 'category',
              data: newData.map((item) => item.name),
              axisLine: {
                lineStyle: {
                  color: 'rgba(108, 128, 151, 0.30)'
                }
              },
              axisLabel: {
                fontFamily: 'MicrosoftYaHei',
                color: 'rgba(208, 222, 238, 1)',
                fontSize: 18,
                interval: 0,
                padding: [0, -15],
                rotate: -20,
                margin: 20
                // autoRotate: true
              }
            },
            {
              type: 'category',
              show: false,
              data: newData.map((item) => item.name)
            }
          ],
          series: [
            {
              name: '政治面貌',
              type: 'bar',
              barWidth: 24,
              data: dataArr,
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(74, 72, 52, 0.05)' },
                  { offset: 1, color: 'rgba(255, 232, 58, 1)' }
                ])
              },
              label: {
                show: true,
                color: '#fff',
                fontSize: 20,
                fontFamily: 'MicrosoftYaHei',
                position: 'top', // 顶部显示
                formatter: '{c}' // 显示数据值
              }
            },

            {
              name: '政治面貌2',
              type: 'pictorialBar',
              symbol: 'Rectangle',
              itemStyle: {
                borderWidth: 0,
                color: 'rgba(255, 232, 58, 1)'
              },
              symbolPosition: 'end',
              symbolOffset: [0, '-50%'],
              symbolSize: [24, 2],
              zlevel: 2,
              data: dataArr
            },
            {
              name: '政治面貌3',
              xAxisIndex: 1,
              itemStyle: {
                color: 'rgba(255,190,0,0.08)'
              },
              data: dataArr
                .map(() => this.max)
                .map((i, index) => {
                  return (
                    index == this.currentShow && {
                      value: this.max
                    }
                  );
                }),
              barWidth: 40,
              type: 'bar'
            }
          ]
        };
      },
      immediate: true,
      deep: true
    }
  }
};
</script>
